<template>
  <div id="app">
    <!-- 导航栏 -->
    <div class='nav'>
      <van-button type="default" class='nav-left' to="/home/navllist/1"><img src="./../../assets/HomeImg/1.png" alt="">
      </van-button>
      <van-search v-model="value" ref="" placeholder="帅哥本人" left action="show-action" class='nav-cen' @click="navc" />
      <van-button type="default" class='nav-right' to="/home/navrlist"><img src="./../../assets/HomeImg/2.png" alt="">
      </van-button>
      <span></span>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe id="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in getoutplayhome" :key="item.banner_id">
          <a :href="item.banner_link">
            <img :src="item.banner_url" alt="">
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格 -->
    <div class="gongge">
      <van-grid :column-num="5" class='grid'>
        <!-- pt_icon https://youzan.github.io/vant-weapp/#/icon  vant ui里面的icon类型 -->
        <van-grid-item class='grid-kuan' v-for="item in producttypehome" :key="item.pt_Id" :icon="item.pt_icon" 
          :text="item.pt_name" :to="'/home/detailpage/'+item.pt_Id">
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 商品 -->
    <Commodity></Commodity>
    <!-- 底部导航栏 -->
    <Tabber></Tabber>
  </div>
</template>
<script>
  import Tabber from '@/components/Tabber'
  import Commodity from '@/components/Commodity'
  export default {
    data: () => ({
      value: '',
      producttypehome: [],
      getoutplayhome: [],
      getproducthome: []
    }),
    created() {
      this.addProductType()
      this.GetOutPlay()
    },
    methods: {
      navc() {
        this.$router.push('/home/navcloist')
      },
      async addProductType() {
        try {
          const res = await this.$Api.apiHome.addProductType()
          const {
              data
          } = res
          this.producttypehome = data
        } catch (error) {
          this.$Toast(error)
        }
      },
      async GetOutPlay() {
        try {
          const res = await this.$Api.apiHome.GetOutPlay()
          const {
            data
          } = res
          this.getoutplayhome = data
          console.log(res)
        } catch (error) {
          this.$Toast(error)
        }
      }
    },
    components: {
      Tabber,
      Commodity
    }
  }

</script>
<style lang='less'>
  // 去除下边滚动条
html,
body {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
}

body,
#app {
  width: 100%;
  overflow-x: hidden;
}

  // 导航栏
  .nav {

    .nav-left,
    .nav-right {
      float: left;
      width: 15%;
      text-align: center;
      padding-top: 17px;
      border: none;

      img {
        width: 80%;
      }
    }

    .nav-cen {
      float: left;
      width: 70%;
      padding: 10px 0;
    }

    .van-search__content {
      background: #eee;
      color: #999;
    }
  }

  // 轮播图
  .banner {
    #my-swipe {
      width: 100%;
      height: 11rem;
      text-align: center;

      img {
        height: 12rem;
      }
    }
  }

  // 宫格
  .gongge {
    .grid {
      .grid-kuan {
        height: 72px;

        img {
          width: 47px;
        }
      }
    }
  }

  // 商品
  .commodity{
    .van-card{
      img{
        height: 14rem
      }
    }
  }
</style>
